import styled from 'styled-components'
import {useEffect, useState} from 'react'
import {userInfo as $userInfo} from '@/api/user.js'
import useConfigStore from '@/store/useConfigStore.js'
import CustomList from '@/views/personalCenter/components/index.jsx'
import {useNavigate} from 'react-router-dom'

const Container = styled.div`
    background: #F4F4F4;
    padding: 30px 0 90px 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .person-info-box {
        width: 1200px;
        height: 426px;
        background: #FFF;
        margin: 0 auto;
        box-sizing: border-box;

        .info-box {
            box-sizing: border-box;
            width: 100%;
            padding: 40px 40px 0 20px;
            display: flex;

            .cover {
                width: 230px;
                height: 230px;
            }

            .edit {
                color: #666666;
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0.48px;
                margin-top: 23px;
                height: fit-content;
                cursor: pointer;
            }

            .info {
                flex: 1;
                margin: 0px 53px 0 27px;
                box-sizing: border-box;
                padding: 30px 0;
                display: flex;
                flex-direction: column;
                //justify-content: space-between;

                .title {
                    color: #1c1c1c;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 14px;
                }

                .desc {
                    color: #666666;
                    font-size: 14px;
                    font-weight: 400;
                    letter-spacing: 0.42px;
                    margin-top: 24px;
                }

                .btn-box {
                    display: flex;
                    align-items: end;
                    margin-top: 22px;
                    flex: 1;

                    .btn-1 {
                        width: 150px;
                        height: 34px;
                        line-height: 34px;
                        flex-shrink: 0;
                        border-radius: 4px;
                        background: #58B530;
                        color: #ffffff;
                        text-align: center;
                        font-size: 14px;
                        font-weight: 700;
                        letter-spacing: 0.42px;
                        box-sizing: border-box;
                    }

                    .btn-2 {
                        width: 150px;
                        height: 34px;
                        border-radius: 4px;
                        border: 1px solid #58B530;
                        box-sizing: border-box;
                        color: #58b530;
                        text-align: center;
                        font-size: 14px;
                        font-weight: 700;
                        line-height: 32px;
                        letter-spacing: 0.42px;
                        margin-left: 20px;
                    }
                }
            }
        }

        .line {
            box-sizing: border-box;
            width: 1160px;
            margin: 0 auto;
            margin-top: 40px;
            height: 1px;
            background: #D9D9D9;
        }

        .num-box {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            margin-top: 29px;

            .item {
                display: flex;
                align-items: center;
                flex-direction: column;

                .num {
                    color: #006647;
                    font-size: 30px;
                    font-weight: 700;
                    line-height: 22px;
                }

                .name {
                    color: #a4a4a4;
                    font-size: 20px;
                    line-height: 24px;
                    margin-top: 10px;
                }
            }
        }
    }

    .tab-box {
        border-radius: 4px;
        background: #EDEDED;
        width: 1200px;
        height: fit-content;
        margin: 0 auto;
        margin-top: 40px;

        .level-box {
            display: flex;
            padding-top: 18px;
            margin-left: 20px;
            gap: 0 35px;

            .item {
                color: #606266;
                font-size: 18px;
                font-weight: 700;
                line-height: 24px;
                padding-bottom: 15px;
                cursor: pointer;

                .num {
                    color: #606266;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 30px;
                }
            }

            .item-active {
                color: #58b530;

                .num {
                    color: #58b530 !important;
                }

                border-bottom: 1px solid #58b530;
            }
        }

        .level2-box {
            border-top: 1px solid #E3E3E3;
            padding-top: 18px;
            padding-bottom: 18px;
            display: flex;
            margin-left: 32px;
            gap: 0 31px;
            align-items: center;

            .item {
                color: #606266;
                font-size: 16px;
                font-weight: 400;
                line-height: 22px;
                cursor: pointer;
            }

            .item-active {
                color: #58B530;
            }
        }
    }
    .list-box{
        width: 1200px;
        margin:  0 auto;
        flex: 1;
        margin-top: 30px;
    }
`
export default function personalCenterPage() {
  const navigate = useNavigate()
  const userInfo = useConfigStore(state => state.userInfo)
  const setUserInfo = useConfigStore(state => state.setUserInfo)
  const [statisticsInfo, setStatisticsInfo] = useState({})
  const [level, setLevel] = useState(1)
  const [level2, setLevel2] = useState(1)
  const [levelTabs, setLevelTabs] = useState([
    {
      label: '已参加活动',
      value: 1,
      num: 0
    },
    {
      label: '我的关注',
      value: 2,
      num: 0
    },
    {
      label: '我的收藏',
      value: 3,
      num: 0
    },
    {
      label: '浏览记录',
      value: 4,
      num: 0
    }
  ])
  const [level2Tabs, setLevel2Tabs] = useState({
    1: [],
    2: [
      {
        label: '报刊社',
        value: 1,
        num: 0
      },
      {
        label: '人物',
        value: 2,
        num: 0
      }
    ],
    3: [
      {
        label: '活动',
        value: 1,
        num: 0
      },
      {
        label: '专栏',
        value: 2,
        num: 0
      },
      {
        label: '音频',
        value: 3,
        num: 0
      },
      {
        label: '文章',
        value: 4,
        num: 0
      },
      {
        label: '报刊订阅',
        value: 5,
        num: 0
      },
      {
        label: '文创周边',
        value: 6,
        num: 0
      },
      {
        label: '行业智库',
        value: 7,
        num: 0
      },
      // {
      //   label: '原创IP',
      //   value: 8,
      //   num: 0
      // }
    ],
    4: [
      {
        label: '活动',
        value: 1,
        num: 0
      },
      {
        label: '专栏',
        value: 2,
        num: 0
      },
      {
        label: '音频',
        value: 3,
        num: 0
      },
      {
        label: '人物',
        value: 4,
        num: 0
      },
      {
        label: '文章',
        value: 5,
        num: 0
      },
      {
        label: '报刊订阅',
        value: 6,
        num: 0
      },
      {
        label: '文创周边',
        value: 7,
        num: 0
      },
      {
        label: '行业智库',
        value: 8,
        num: 0
      },
      // {
      //   label: '原创IP',
      //   value: 9,
      //   num: 0
      // }
    ]

  })
  const level2TabsList = level2Tabs[level]


  async function getUserInfo() {
    const res = await $userInfo()
    if (res.result.status_info.status_code !== 100) {
      return
    }
    setUserInfo(res.result?.user_info)
    const statisticsInfoTmp = res.result?.statistics_info
    setStatisticsInfo(statisticsInfoTmp)
    let recordCount = statisticsInfoTmp.browsed_activity_count +
        statisticsInfoTmp.browsed_column_count + statisticsInfoTmp.browsed_audio_count
        + statisticsInfoTmp.browsed_person_count + statisticsInfoTmp.browsed_article_count
        + statisticsInfoTmp.browsed_journal_count + statisticsInfoTmp.browsed_cultural_creative_product_count +
        statisticsInfoTmp.browsed_database_product_count + statisticsInfoTmp.browsed_ip_product_count
    setLevelTabs([{
      label: '已参加活动',
      value: 1,
      num: statisticsInfoTmp?.participated_activity_count
    },
      {
        label: '我的关注',
        value: 2,
        num: statisticsInfoTmp?.followed_count
      },
      {
        label: '我的收藏',
        value: 3,
        num: statisticsInfoTmp?.favorited_count
      },
      {
        label: '浏览记录',
        value: 4,
        num: recordCount
      }])
    setLevel2Tabs({
      1: [],
      2: [
        {
          label: '报刊社',
          value: 1,
          num: statisticsInfoTmp?.followed_press_count
        },
        {
          label: '人物',
          value: 2,
          num: statisticsInfoTmp?.followed_person_count
        }
      ],
      3: [
        {
          label: '活动',
          value: 1,
          num: statisticsInfoTmp?.favorited_activity_count
        },
        {
          label: '专栏',
          value: 2,
          num: statisticsInfoTmp?.favorited_column_count
        },
        {
          label: '音频',
          value: 3,
          num: statisticsInfoTmp?.favorited_audio_count
        },
        {
          label: '文章',
          value: 4,
          num: statisticsInfoTmp.favorited_article_count
        },
        {
          label: '报刊订阅',
          value: 5,
          num: statisticsInfoTmp.favorited_journal_count
        },
        {
          label: '文创周边',
          value: 6,
          num: statisticsInfoTmp.favorited_cultural_creative_product_count
        },
        {
          label: '行业智库',
          value: 7,
          num: statisticsInfoTmp.favorited_database_product_count
        },
        // {
        //   label: '原创IP',
        //   value: 8,
        //   num: statisticsInfoTmp.favorited_ip_product_count
        // }
      ],
      4: [
        {
          label: '活动',
          value: 1,
          num: statisticsInfoTmp.browsed_activity_count
        },
        {
          label: '专栏',
          value: 2,
          num: statisticsInfoTmp.browsed_column_count
        },
        {
          label: '音频',
          value: 3,
          num: statisticsInfoTmp.browsed_audio_count
        },
        {
          label: '人物',
          value: 4,
          num: statisticsInfoTmp.browsed_person_count
        },
        {
          label: '文章',
          value: 5,
          num: statisticsInfoTmp.browsed_article_count
        },
        {
          label: '报刊订阅',
          value: 6,
          num: statisticsInfoTmp.browsed_journal_count
        },
        {
          label: '文创周边',
          value: 7,
          num: statisticsInfoTmp.browsed_cultural_creative_product_count
        },
        {
          label: '行业智库',
          value: 8,
          num: statisticsInfoTmp.browsed_database_product_count
        },
        // {
        //   label: '原创IP',
        //   value: 9,
        //   num: statisticsInfoTmp.browsed_ip_product_count
        // }
      ]

    })
  }

  useEffect(() => {
    getUserInfo()
  }, [level, level2])
  return (<>
    <Container>
      <div className={'person-info-box'}>
        <div className={'info-box'}>
          <img src={userInfo?.profile_picture} alt="" className={'cover'}/>
          <div className={'info'}>
            <div className={'title'}>{userInfo?.user_name}</div>
            <div className={'desc u-line-4'}>{userInfo?.self_introduction}</div>
            {(userInfo && userInfo?.role_type === 2) && <div className={'btn-box'}>
              <div className={'btn-1'}>创作后台</div>
              <div className={'btn-2'}>查看绑定报刊社</div>
            </div>}

          </div>
          <div className={'edit'} onClick={()=>{
            navigate('/editProfile')
          }}>编辑资源</div>
        </div>
        <div className={'line'}></div>
        <div className={'num-box'}>
          <div className={'item'}>
            <div className={'num'}>{statisticsInfo?.participated_activity_count || 0}</div>
            <div className={'name'}>我的活动</div>
          </div>
          <div className={'item'}>
            <div className={'num'}>{statisticsInfo?.favorited_count || 0}</div>
            <div className={'name'}>我的收藏</div>
          </div>
          <div className={'item'}>
            <div className={'num'}>{statisticsInfo?.followed_count || 0}</div>
            <div className={'name'}>我的关注</div>
          </div>
          <div className={'item'}>
            <div className={'num'}>{statisticsInfo?.reading_time || 0}</div>
            <div className={'name'}>阅读时长</div>
          </div>
          <div className={'item'}>
            <div className={'num'}>{statisticsInfo?.play_time || 0}</div>
            <div className={'name'}>收听时长</div>
          </div>
        </div>
      </div>
      <div className={'tab-box'}>
        <div className={'level-box'}>
          {levelTabs.map((item, index) => (
              <div className={`item ${item.value === level ? 'item-active' : ''}`} key={index} onClick={() => {
                setLevel(item.value)
                setLevel2(1)
              }}>
                {item.label}
                <span className={'num'}>（{item.num}）</span>
              </div>))}
        </div>
        {level2TabsList.length > 0 && <div className={'level2-box'}>
          {level2TabsList.map((item, index) => (
              <div key={index} className={`item ${item.value === level2 ? 'item-active' : ''}`} onClick={() => {
                setLevel2(item.value)
              }}>
                {item.label}（{item.num}）
              </div>))}
        </div>}
      </div>
      <div className={'list-box'}>
        <CustomList leve1={level} leve2={level2}></CustomList>
      </div>

    </Container>
  </>)
}